<template>
  <div style="height: 100%;">
    <view-box
      ref="viewBox"
      :body-padding-top="isShowNav ? topPadding : '0'"
      :body-padding-bottom="isTabar ? bottomPadding : '0'">
      <x-header
        v-if="isShowNav"
        style="width:100%;position:absolute;left:0;top:0;z-index:100;"
        slot="header"
        :left-options="leftOptions"
        :title="title"
      ></x-header>
      <router-view class="router-view"></router-view>
      <tabbar
        v-if="isTabar"
        icon-class="vux-center"
        slot="bottom">
        <tabbar-item :link="{path:'/'}" :selected="route.path === '/'">
          <span class="icon-tabbar" slot="icon" style="position:relative;top: -2px;">&#xe92d;</span>
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/transaction'}" :selected="route.path === '/transaction'">
          <span class="icon-tabbar" slot="icon">&#xeba6;</span>
          <span slot="label"><span>交易</span></span>
        </tabbar-item>
        <tabbar-item :link="{path:'/notice'}" :selected="route.path === '/notice'">
          <span class="icon-tabbar" slot="icon">&#xeaf5;</span>
          <span slot="label"><span>公告</span></span>
        </tabbar-item>
        <tabbar-item :link="{path:'/personal'}" :selected="route.path === '/personal'">
          <span class="icon-tabbar" slot="icon">&#xec72;</span>
          <span slot="label"><span>个人中心</span></span>
        </tabbar-item>
      </tabbar>
    </view-box>
  </div>
</template>

<script>
  import {ViewBox, XHeader, Tabbar, TabbarItem} from 'vux'

  export default {
    name: 'app',
    components: {
      ViewBox,
      XHeader,
      Tabbar,
      TabbarItem
    },
    data () {
      return {
        topPadding: '46px',
        bottomPadding: '55px'
      }
    },
    computed: {
      route () {
        return this.$route
      },
      isShowNav () {
        let showNav = true
        switch (this.route.path) {
          case '/':
            showNav = false
            break
          case '/login':
            showNav = false
            break
          case '/register':
            showNav = false
            break
          case '/register2':
            showNav = false
            break
          case '/register3':
            showNav = false
            break
          case '/register4':
            showNav = false
            break
          case '/forgot':
            showNav = false
            break
          case '/forgot2':
            showNav = false
            break
          case '/forgot3':
            showNav = false
            break
        }
        return showNav
      },
      isTabar () {
        let showTabbar = false
        switch (this.route.path) {
          case '/':
            showTabbar = true
            break
          case '/transaction':
            showTabbar = true
            break
          case '/notice':
            showTabbar = true
            break
          case '/personal':
            showTabbar = true
            break
        }
        return showTabbar
      },
      leftOptions () {
        let showBack = true
        switch (this.route.path) {
          case '/':
            showBack = false
            break
          case '/login':
            showBack = false
            break
          case '/transaction':
            showBack = false
            break
          case '/notice':
            showBack = false
            break
          case '/personal':
            showBack = false
            break
        }
        return {
          showBack: showBack
        }
      },
      title () {
        return this.route.name
      }
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/tap.less';
  @import "assets/style/style.less";
  .router-view {
    width: 100%;
    top: 46px;
  }
  .weui-tabbar__icon > sup {
    top: 0px !important
  }
</style>
